import React from 'react';
import TemplateCarousel from '../../components/TemplateCarousel/TemplateCarousel';
import './TemplateShowcase.scss';

const TemplateShowcase: React.FC = () => {
  // 示例数据
  const posterTemplates = [
    {
      id: 1,
      src: 'https://gd-filems.dancf.com/gaoding/gaoding/33741/553d6e79-5f9f-4201-9826-262448ebd5706916.png',
      type: 'poster',
      title: '创意海报设计模板',
      author: '设计师小王',
      views: 1234
    },
    // ... 更多海报模板
  ];

  const longPageTemplates = [
    {
      id: 1,
      src: 'https://gd-filems.dancf.com/gaoding/gaoding/53357/4b046ca0cef44f108fba70d43c92607d.jpg',
      type: 'longPage',
      title: '长页面设计模板',
      author: '设计师小李',
      views: 2345
    },
    // ... 更多长页面模板
  ];

  const h5Templates = [
    {
      id: 1,
      src: 'https://gd-filems.dancf.com/gaoding/gaoding/53357/e760850a6dac458caf1bc13ff5b1dcfa.gif',
      type: 'h5',
      title: 'H5互动页面模板',
      author: '设计师小张',
      views: 3456
    },
    // ... 更多H5模板
  ];

  const videoTemplates = [
    {
      id: 1,
      src: 'https://gd-filems.dancf.com/gaoding/gaoding/74244/4c2d59928a5f49bd8bb82776e7474cf0.jpg',
      type: 'video',
      title: '视频封面设计模板',
      author: '设计师小陈',
      views: 4567
    },
    // ... 更多视频模板
  ];

  return (
    <div className="template-showcase">
      <section className="showcase-section">
        <TemplateCarousel
          title="精选海报模板"
          subtitle="专业设计师精心打造"
          items={posterTemplates}
        />
      </section>

      <section className="showcase-section">
        <TemplateCarousel
          title="长页面模板"
          subtitle="适合各类长图设计"
          items={longPageTemplates}
        />
      </section>

      <section className="showcase-section">
        <TemplateCarousel
          title="H5互动模板"
          subtitle="让您的页面动起来"
          items={h5Templates}
        />
      </section>

      <section className="showcase-section">
        <TemplateCarousel
          title="视频封面模板"
          subtitle="让您的视频更吸引人"
          items={videoTemplates}
        />
      </section>
    </div>
  );
};

export default TemplateShowcase; 